<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Mundo Kitty Empresa</title>
        <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/extjs/resources/css/ext-all.css')?>">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/site.css')?>">
        <!--<script type="text/javascript" src="<?php echo base_url('assets/extjs/ext-all.js')?>"></script>-->
        <script type="text/javascript" src="<?php echo base_url('assets/extjs/ext-all-debug.js')?>"></script>
        <script type="text/javascript" src="<?php echo base_url('assets/extjs/locale/ext-lang-es.js')?>"></script>
        <script type="text/javascript" src="<?php echo base_url('assets/js/static_configs.js')?>"></script>
        <script type="text/javascript" src="<?php echo base_url('assets/js/funciones_comunes.js')?>"></script>
        <script type="text/javascript">
            var BASE_URL = '<?php echo base_url('index.php')?>/';
            var BASE_IMAGE = '<?php echo base_url('assets/images')?>/';
            var panelNorte = Ext.createWidget('box',{
                region: 'north',
                height: 100,
                html: 'north'
            });
            var menuEntradas = Ext.create('Ext.toolbar.Toolbar', {
                vertical:true,
                layout:'fit',
                items: [
                    createMenuButton('proveedores'),
                    createMenuButton('compras'),
                    createMenuButton('productos'),
                    createMenuButton('marcas'),
                    createMenuButton('categorias'),
                    createMenuButton('generos'),
                ]
            });

            var item1 = new Ext.Panel({
                title: 'Entrada',
                items: menuEntradas
            });

            var menuSalidas = Ext.create('Ext.toolbar.Toolbar', {
                vertical:true,
                layout:'fit',
                items: [
                    createMenuButton('facturas')
                ]
            });
            var item2 = new Ext.Panel({
                title: 'Salida',
                items:menuSalidas,
                cls:'empty'
            });

            var item3 = new Ext.Panel({
                title: 'Module',
                html: '&lt;empty panel&gt;',
                cls:'empty'
            });


            var panelOeste = Ext.Panel({
                //Panel de Navegación
                region: 'west',
                title: 'Opciones de Navegación',
                minWidth: 175,
                minHeight: 140,
                layout: 'accordion',
                items:[item1,item2,item3]
                //items:[menuVertical]
            });

            var panelCentral = Ext.createWidget('tabpanel',{
                //Panel Contenedor de Tabs
                region: 'center',
                layout: 'fit',
                border: true,
                items:[
                    {
                        title:'Bienvenido',
                        padding: 5,
                        html:'Ok'
                    }
                ]
            });
            function crearViewport(){
                Ext.create('Ext.Viewport', {
                    //Config del Viewport
                    layout: {
                        type: 'border',
                        padding: 5
                    },
                    defaults: { split: true },
                    items: [
                        panelNorte,
                        panelOeste,
                        panelCentral,
                        {
                            region: 'east',
                            collapsible: true,
                            floatable: true,
                            split: true,
                            width: 200,
                            minWidth: 120,
                            minHeight: 140,
                            title: 'East',
                            layout: {
                                type: 'vbox',
                                padding: 5,
                                align: 'stretch'
                            },
                            items: [{
                                xtype: 'textfield',
                                labelWidth: 70,
                                fieldLabel: 'Text field'
                            }, {
                                xtype: 'component',
                                html: 'I am floatable'
                            }]
                        },
                        {
                            region: 'south',
                            collapsible: true,
                            split: true,
                            height: 200,
                            minHeight: 120,
                            title: 'South',
                            layout: {
                                padding: 5
                            }
                        }
                    ]
                });
            }
            Ext.onReady(function(){crearViewport();});
        </script>
    </head>
    <body>
    </body>
</html>